<template>
  <!-- 添加或修改用户配置对话框 -->
  <el-dialog
    :title="title"
    :visible.sync="open"
    append-to-body
    width="80%"
    @close="handleClose"
  >
    <el-descriptions :column="3">
      <el-descriptions-item label="姓名">
        <b>{{ form.nickName || "-" }}</b>
      </el-descriptions-item>
      <el-descriptions-item label="账号">
        <b>{{ form.userName || "-" }}</b>
      </el-descriptions-item>
      <el-descriptions-item label="手机号">
        <b>{{ form.phonenumber || "-" }}</b>
      </el-descriptions-item>
      <el-descriptions-item label="角色">
        <b>{{ rolesNames || "-" }}</b>
      </el-descriptions-item>
      <el-descriptions-item label="账号状态">
        <dict-tag
          :options="dict.type.sys_normal_disable"
          :value="form.status"
        ></dict-tag>
      </el-descriptions-item>
      <el-descriptions-item label="管理基地">
        <b>{{ productionBaseNames || "-" }}</b>
      </el-descriptions-item>
      <el-descriptions-item label="管理塘口">
        <b>{{ culturePondNames || "-" }}</b>
      </el-descriptions-item>
      <el-descriptions-item label="备注" :span="2">
        <b>{{ form.remarks || "-" }}</b>
      </el-descriptions-item>
      <el-descriptions-item label="员工照片" :span="3">
        <div class="padding">
          <ImagePreview
            :src="form.avatar || placeholderImg"
            :width="100"
            :height="100"
          ></ImagePreview>
        </div>
      </el-descriptions-item>
    </el-descriptions>

    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { detail } from "@/api/production/personnel";
import ImagePreview from "@/components/ImagePreview";
export default {
  name: "production-personnel_detail",
  components: { ImagePreview },
  dicts: ["sys_normal_disable"],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      rolesNames:'',
      productionBaseNames: "",
      culturePondNames: "",
      placeholderImg: require("@/assets/images/production.png"),
      baseUrl: process.env.VUE_APP_BASE_API,
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      queryParams: { id: undefined },
      title: "详细信息",
    };
  },
  watch: {
    visible: {
      handler(val) {
        this.open = val;
        this.title = this.params.title;
        if (val) {
          this.queryParams.id = this.params.id;
          this.getDetail();
        }
      },
    },
  },
  methods: {
    getDetail() {
      detail(this.queryParams).then((res) => {
        this.form = res.data;
        this.rolesNames = res.data.roles.map(item=>item.roleName).join(",")
        this.productionBaseNames = res.productionBaseList
          .map((item) => item.name)
          .join(",");
        this.culturePondNames = res.culturePondList
          .map((item) => item.name)
          .join(",");
      });
    },
    // 取消按钮
    handleClose() {
      this.$emit("update:visible", false);
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },
  },
};
</script>

<style scoped lang="scss">
</style>